<script lang="ts" setup name="LoveTalk">
    import { useLoveTalkStore } from '@/store/lovetalk';
import { storeToRefs } from 'pinia';

    const loveTalkStore = useLoveTalkStore();

    let { talkList } = storeToRefs(loveTalkStore);

    loveTalkStore.$subscribe((mutate, state) => {
        // 当loveTalkStore中的数据发生变化时，这个subscribe函数就会被调用
        console.log('loveTalkStore中的数据发生了变化', mutate, state);
        localStorage.setItem('loveTalkStore', JSON.stringify(state.talkList));
    });

    async function getLoveTalk() {
        loveTalkStore.getATalk();
    }

    function clearCache() {
        talkList.value = [];
        localStorage.clear();
    }
</script>

<template>
    <div class="talk">
        <button @click="getLoveTalk">获取一句土味情话</button>
        <button @click="clearCache">清除本地数据</button>
        <ul>
            <li v-for="talkItem in talkList" :id="talkItem.id">{{ talkItem.title }}</li>
        </ul>
    </div>
</template>

<style scoped>
    .talk {
        background-color: orange;
        padding: 10px;
        border-radius: 10px;
        box-shadow: 0 0 10px;
    }
</style>